<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8" />
    <title>命名视图</title>
    <!--引入Vue库-->
    <script src="vue.js"></script>
    <script src="vue-router.js"></script>
    <style>
      .header {
        margin-top: 25px;
        background-color: gray;
        height: 125px;
      }
      .container {
        display: flex;
        height: 575px;
      }
      .left {
        background-color: gainsboro;
        flex: 2.5;
      }
      .main {
        background-color: honeydew;
        flex: 7.5;
      }

      div {
        padding: 0px;
        margin: 0px;
      }
    </style>
  </head>
  <body>
    <div id="app">
      <router-view></router-view>
      <div class="container">
        <router-view name="left"></router-view>
        <router-view name="main"></router-view>
      </div>
      <!--头部，侧边栏，主体内容区域三个区域，每个有一个占位符-->
      <!--name是为了将components中的多个组件一一对应起来-->
    </div>
    <script>
      var header = {
        template: '<div class="header">head头部区域</div>',
      };
      var leftNav = {
        template: '<div class="left">left侧边栏</div>',
      };
      var mainContent = {
        template: '<div class="main">main主体内容</div>',
      };
      var router = new VueRouter({
        routes: [
          {
            path: "/",
            components: {
              default: header,
              left: leftNav,
              main: mainContent,
            },
          },
        ],
      });
      var vm = new Vue({
        el: "#app",
        router,
      });
    </script>
  </body>
</html>
